:host {
  width: 500px; display: inline-block; vertical-align: top; --height: 30px; --padding: 10px; --font-size: 12px; --input-background: #ffffff; --input-border-color: #d1d1d1; --input-border-color-focus: #5b9dd9; --input-box-shadow-focus: rgba(30, 140, 190, 0.8); --select-background: #f5f5f5; --z-index: 1000
}
.container {
  width: 100%; display: flex !important; align-items: center; position: relative; z-index: var(--z-index)
}
.container div.box {
  width: 100%; height: var(--height); box-sizing: border-box; background: var(--input-background); display: flex; flex-flow: row; align-items: stretch; border: var(--input-border-color) 1px solid; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.08); transition: all .3s ease
}
.container div.box div.select {
  width: auto; position: relative; z-index: 200; background: var(--select-background)
}
.container div.box div.select select {
  display: inline-flex; align-items: center; appearance: base-select; outline: none; padding: 0px calc(var(--padding) + 28px) 0px var(--padding); height: 100%; font-size: var(--font-size); border: 0px; background: url(../../../../svg/select.svg) transparent calc(100% - var(--padding)) center no-repeat; background-size: 20px
}
.container div.box div.select select::checkmark,
.container div.box div.select select::picker-icon {
  display: none
}
.container div.box div.select select::picker(select) {
  appearance: base-select; border: var(--input-border-color-focus) 1px solid; box-shadow: 0px 0px 2px var(--input-box-shadow-focus)
}
.container div.box div.select select option {
  display: flex; align-items: center; height: 30px; padding: 0px 10px; background: #ffffff; color: #333; white-space: nowrap; transition: all 0.3s ease
}
.container div.box div.select select option:hover {
  background: #eeeeee; color: #000
}
.container div.box div.select select option::checkmark {
  display: none
}
.container div.box div.select:empty {
  display: none
}
.container div.box div.input {
  flex: 1
}
.container div.box div.input input.value {
  width: 100%; height: 100%; box-sizing: border-box; outline: none; background: transparent; padding: 0px var(--padding); font-size: var(--font-size); border: 0px; border-radius: 0px; position: relative; z-index: 200
}
.container div.mask {
  width: 100%; height: 100%; background: #dddddd; opacity: .3; position: absolute; top: 0px; left: 0px; z-index: -100
}
.container.focus div.box {
  border-color: var(--input-border-color-focus); box-shadow: 0px 0px 2px var(--input-box-shadow-focus)
}
.container[position=left] {
  flex-flow: row
}
.container[position=left] div.select {
  border-right: var(--input-border-color) 1px solid
}
.container[position=right] {
  flex-flow: row-reverse
}
.container[position=right] div.select {
  border-left: var(--input-border-color) 1px solid
}
.container.disabled div.mask {
  z-index: 10000
}